import React, { useState } from 'react'
import { Menu } from 'antd'
import { Link } from 'react-router-dom'
import { MenuMode } from 'rc-menu/lib/interface'
import { MenuTheme } from 'antd/lib/menu/MenuContext'

import MenuConfig from '../../config/MenuConfig'
import UserDetail from './sider-menu-child/UserDetail'
import MenuBottom from './sider-menu-child/MenuBottom'
import HomeStore from '../../stores/HomeStory'
import { inject, observer } from 'mobx-react'

const { SubMenu } = Menu

interface siderMenuProps {
  mod?: MenuMode
  theme?: MenuTheme
  className?: string | undefined
  setMenuKey?: Function
  collapsed?: boolean
  Url?: string
  setCollapsed?: Function
  HomeStore: HomeStore
}

export interface menuNode {
  key: string
  en_US: string
  zh_CN: string
  icon: React.ReactNode
  link: string
  child: menuNode[]
}

const SiderMenu: React.FC<siderMenuProps> = (props: siderMenuProps) => {
  const {
    mod,
    theme,
    className,
    setMenuKey,
    Url,
    collapsed,
    setCollapsed,
    HomeStore,
  } = props

  const [rowSpan, setRowSpan] = useState(8)

  const onclick = (menu: any) => {
    if (setMenuKey) {
      setMenuKey(menu.key)
    }
  }

  let renderMenu = (menuConfig: menuNode[]) => {
    return menuConfig.map((item) => {
      if (item.child.length > 0) {
        return (
          <SubMenu
            key={item.key}
            icon={item.icon}
            title={item[HomeStore.language]}
          >
            {renderMenu(item.child)}
          </SubMenu>
        )
      }
      return (
        <Menu.Item id={item.key} key={item.key} icon={item.icon}>
          <Link replace to={item.link}>
            {item[HomeStore.language]}
          </Link>
        </Menu.Item>
      )
    })
  }

  return (
    <>
      <UserDetail
        key='sider-menu-user'
        rowSpan={rowSpan}
        collapsed={collapsed}
        Url={Url}
        HomeStore={HomeStore}
      />
      <Menu mode={mod} theme={theme} className={className} onClick={onclick}>
        {renderMenu(MenuConfig)}
      </Menu>
      <MenuBottom
        collapsed={collapsed}
        setCollapsed={setCollapsed}
        setRowSpan={setRowSpan}
        language={HomeStore.language}
      />
    </>
  )
}

export default inject('HomeStore')(observer(SiderMenu))
